<template>
 <div id='list' @mousedown="hadCom">
   <el-row :type="'flex'">
     <el-col :span="16">
       <el-input size="small" calss="new" v-model="newItem"></el-input>
     </el-col>
     <el-col :span="1">
       <el-button size="small" type="primary" @click.stop="add">新增+</el-button>
     </el-col>
   </el-row>
   <div class="items">
     <div class="item" v-for="(v, k) in _list" :key="k">
       <div class="left">
         <span style="display: none;">{{_clear}}</span>
         <el-select ref="item" @change="selectItem($event, k)" v-model="items[k].mine.value" placeholder="请选择" :size="'mini'">
           <el-option v-for="(vi, ki) in _comItem" :key="ki" :label="vi.label" :value="vi.value"></el-option>
         </el-select>
       </div>
       <component class="input-with-select lab" :is="v.struct" size="mini" v-model="v.label" @blur="tospan(k)" @input="toinput(k, $event)" @click.stop="toinput(k)">{{v.struct === 'span' ? v.label : ''}}</component>
       <i class="el-tag__close el-icon-close" @click.stop="del(k)"></i>
     </div>
   </div>
 </div>
</template>

<script>
/**
 * @author 'yejinbo'
 * @description `之前用来编辑子项的组件，已没用，已使用dataUrl代替`
 */
import _S from '@/config/s'
export default {
  name: 'list',
  data () {
    return {
      newItem: ''
    }
  },
  computed: {
    _list () {
      let tmplist = this.list
      console.log('233')
      for (let i in tmplist) {
        tmplist[i].struct = 'el-input'
      }
      if ((this.list.length !== this.items.length)) {
        throw new Error('the list length do not matched this items')
      }
      return tmplist
    },
    _clear () {
      if (this.clear) this.clearItem()
      return ''
    },
    _comItem () {
      if (this.elname === 'el-button-group') {
        return [
          {
            label: '保存',
            value: 'SAVE'
          },
          {
            label: '返回',
            value: 'BACK'
          }
        ]
      } else return this.comItem
    }
  },
  methods: {
    clearItem () {
      for (let i in this.items) {
        this.items[i].mine.value = ''
        this.items[i].mine.business = ''
        this.$forceUpdate()
      }
    },
    selectItem (itemVal, k) {
      this.items[k].mine.business = `${this.mine.business}-${itemVal}`
      if (this.elname === 'el-button-group') {
        this.items[k].mine.label = this.list[k].label
      }
      this.$forceUpdate()
    },
    hadCom () {
      if (!this.$store.state.indexPath.indexCom.mine.business) {
        return this.$alert('请先选择字段名').catch((_) => {
          console.log(_)
        })
      }
    },
    tospan (k) {
      this._list[k].struct = 'span'
      this.$forceUpdate()
    },
    toinput (k, val) {
      if (val) this.items[k].mine.label = val
      this._list[k].struct = 'el-input'
      this.$forceUpdate()
    },
    del (k) {
      if (this.items.length === 1) {
        _S.$emit('noitems')
        return
      }
      this.list.splice(k, 1)
      this.items.splice(k, 1)
      _S.$emit('updateProps', this.items.length)
      this.$forceUpdate()
    },
    add () {
      if (!this.newItem) return
      let _t = JSON.parse(JSON.stringify(this.items[this.items.length - 1]))
      _t.attrs['label'] = this.newItem
      _t.attrs['value'] = (Math.random() * 1000).toFixed(3)
      this.list.push({
        label: this.newItem
      })
      this.items.push(_t)
      this.newItem = ''
      // this.$forceUpdate()
    }
  },
  components: {},
  props: {
    list: {
      type: Array
    },
    elProps: {
      type: Array
    },
    comItem: {
      type: Array
    },
    elname: {
      type: String
    },
    mine: {
      type: Object
    },
    clear: {
      type: Boolean
    },
    items: {
      type: Array
    }
  }
}
</script>

<style scoped lang="stylus">
#list
  flex: 1
  min-width: 12rem
  height: auto
  width: 100%
  box-sizing: border-box
  .lab
    flex: 1
    justify-content: center
    align-items: center
  .items
    flex: 1
    justify-content: center
    align-items: center
    box-sizing: border-box
    .item
      margin-top: 0.2rem
      display: flex
      flex: 1
      min-height: 1.8rem
      justify-content: space-between
      background-color: rgba(225, 225, 225, 0.8)
      align-items: center
      box-sizing: border-box
      .left
        flex: 0.55
        box-sizing: border-box
      span
        flex: 1
        display: inline-flex
        align-items: center
        padding-left: 15px
        height: 28px
</style>
